<template>
	<view class="page flex-col">
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="content">我的关注</block>
		</cu-custom>

			<scroll-nav class="space-around fixscrol" :brands="brands" @tabtap="tabtap" ref='brands'></scroll-nav>
		<!-- 显示区域 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="[{height: swiperHeight+ 'px'}]" :current="tabIndex"
				disable-touch>
				<swiper-item v-for="(items,index) in auctionpageData" :key="index">
					<scroll-view scroll-y class="scrolllist">
						<template v-if="items.list.length > 0">
							<!-- 图文列表 -->
							<block>
								<view class="section1 flex-col">
									<view class="Body flex-col">
										<view class="bd2 flex-col justify-between">
											<view class="box3 flex-col">
												<!-- 按组使用 -->
												<uni-swipe-action>
													<uni-swipe-action-item v-for="(item, index1) in items.list"
														:key="index1" :right-options="options" @click="favClick"
														@change="swipeChange($event, index, item)">
														<view class="content-box"
															@click="godetail(item.auctionId,item.startTime,tabIndex == 0 ? 1 : 2,item.itemId)">
															<!-- <view class="group1 flex-col" @click="godetail(item.auctionId,item.startTime,tabIndex == 0 ? 1 : 2,item.itemId)" v-for="(item, index1) in items.list" :key="index1"> -->
															<view class="group1 flex-col">
																<view class="outer1 flex-row justify-between">
																	<view class="box4 flex-col">
																		<image class="box5" :src="$getFileAccessHttpUrl(item.icon)"
																			mode="aspectFill"></image>
																	</view>
																	<view class="flex-col  justify-between">
																		<view class="TextGroup1 flex-col">
																			<view class="txt2">
																				{{tabIndex == 0 ? item.title : item.itemName}}
																			</view>
																			<view class="wordbox" v-if="tabIndex == 1">
																				<view class="word3">报名费：</view>
																				<view class="word1">{{item.applyCost}}
																				</view>
																				<view class="word3 margin-left">保证金：
																				</view>
																				<view class="word1">
																					{{item.earnestMoney}}</view>
																			</view>
																			<view class="wordbox" v-if="tabIndex == 0">
																				<view class="word3 labelbordr">
																					{{item.category}}</view>
																			</view>
																			<view class="wordbox" v-if="tabIndex == 0">
																				<view class="word3">
																					拍品数量：{{item.itemNum == null ? '0' : item.itemNum}},
																				</view>
																				<view class="word2">
																					下单数量：{{item.orderNum == null ? '0' : item.orderNum}}
																				</view>
																			</view>
																			<view class="wordbox" v-if="tabIndex == 1">
																				<view class="word3"
																					v-if="item.itemStatus == 2 || item.itemStatus == 5">当前价：
																				</view>
																				<view class="word3"
																					v-if="item.itemStatus == 3">成交价：
																				</view>
																				<view class="word1"
																					v-if="item.itemStatus == 2 || item.itemStatus == 5">
																					{{item.currentPrice}}
																				</view>
																				<view class="word1"
																					v-if="item.itemStatus == 3">
																					{{item.closingPrice}}
																				</view>
																				<view class="word2"
																					v-if="item.itemStatus == 2 || item.itemStatus == 3 || item.itemStatus == 4 ">
																					{{item.biddingNum}}次出价</view>
																			</view>
																			<view class="wordbox"
																				v-if="item.status == 2">
																				<view class="word3">
																					报名截止时间：{{item.applyTime}}</view>
																			</view>
																			<view class="timeout" v-if="tabIndex == 0">
																				<view class="outer2 flex-col"
																					v-if="item.status != 6">
																					<view class="word5">
																						{{item.status == 2 ? '未开始' : item.status == 4 ? '进行中' : ''}}
																					</view>
																				</view>
																				<!-- <view class="word4">{{liveCountdown}}</view> -->
																				<view class="word4"
																					v-if="item.status == 2">
																					{{item.showtime == '00天00时00分00秒' ? apiinterestpage() : item.showtime}}</view>

																			</view>

																		</view>
																	</view>
																</view>
																<view v-if="tabIndex == 1 && item.hasApply"
																	class="righbom active">
																	<view class="circle">已报名</view>
																</view>
																<view class="wordbox positop"
																	:style="item.auctionWay == 2 ? 'background: url(../../static/home/128/Bgblue.png) -4px 0px no-repeat;background-size: 57px 19px;':'background: url(../../static/home/128/Bgorange.png) -4px 0px no-repeat;background-size: 57px 19px;'">
																	<view class="word3">
																		{{tabIndex == 0 ? item.auctionWayText : item.itemStatusText}}
																	</view>
																</view>
															</view>
														</view>
													</uni-swipe-action-item>
												</uni-swipe-action>
												<view class="loadingType">{{loadingType ?'没有更多数据了!' : '上拉显示更多'}}</view>
											</view>
										</view>
									</view>

								</view>
							</block>
						</template>

					</scroll-view>
				</swiper-item>
			</swiper>
			<empty v-if="auctionpageData[tabIndex].list.length == 0"></empty>
		</view>
	</view>
	</view>
</template>

<script>
	import server from '@/api/server.js'
	import scrollNav from '../../pages/component/scrollNav.vue'
	export default {
		components: {
			scrollNav,
		},
		data() {
			return {
				options: [{
					text: '关闭',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '取消关注',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				isOpened: 'none',
				options1: [{
					text: '取消置顶'
				}],
				brands: [
					'拍卖会',
					'标的物',
				],
				swiperHeight: 0, //高度
				tabIndex: 0,
				auctionpageData: [{
						list: []
					},
					{
						list: []
					},
				],
				loadingType: false,
				liveCountTimes: null,
				params: {
					type: 1,
					pageNo: 1,
					pageSize: 10,
				},
				interestId:'',
			};
		},

		//在.js文件中监听下拉触底
		onReachBottom:function(){
			console.log('1324543456')
			if(!this.loadingType){
				this.apiinterestpage()
			}
		}, 
		onShow() {
			this.apiinterestpage()

		},
		beforeDestroy() {
			console.log("this.liveCountTimes", '22222222222222222222222222222')
		
			clearInterval(this.liveCountTimes)
			this.liveCountTimes = null;
		},
		methods: {
			swipeChange(e, index, item) {
				console.log('当前状态：' + e + '，下标：' + index,item)
				this.interestId = item.interestId
			},
			// bindClick(e) {
			// 	console.log(e);
			// 	uni.showToast({
			// 		title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
			// 		icon: 'none'
			// 	});
			// },
			change(e) {
				this.isOpened = e;
				console.log('返回：', e);
			},
			favClick(e) {
				console.log(e)
				var interestIdIndex = e.index
				let api;
				let obj = {}
				if (interestIdIndex == 1) {
					obj = {
						id: this.interestId
					}
					server.interestdelete(obj).then(res => {
						console.log(res)
						if (res.data.success) {
							this.params.pageNo = 1
							this.auctionpageData[this.tabIndex].list = []
							this.apiinterestpage()
							this.$tip.toast('取消关注成功')
						} else {
							this.$tip.error(res.data.message)
						}
					})
				}
			},
			godetail(auctionId, time, tabIndex, id) {
				console.log(id, id)
				if (tabIndex == 1) {
					uni.navigateTo({
						url: '/page_myauction/myauction/myauctionDetail?auctionId=' + auctionId
					})
				} else {
					uni.navigateTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/page_myauction/subjectdetail/subjectdetail?id=' + id + '&auctionId=' +
							auctionId + '&showye=' + false
					})
				}

			},
			apiinterestpage() {
				let that = this
				this.params.type = this.tabIndex == 0 ? 1 : 2
				server.interestpage(this.params).then(res => {
					console.log(res, '111111')
					if (res.data.success) {
						
						if (res.data.result.records.length != 10) { //没有数据
							this.loadingType = true;
						}
						this.params.pageNo++; //每触底一次 page +1
						this.auctionpageData[this.tabIndex].list = this.auctionpageData[this.tabIndex].list.concat(res.data.result.records)
						this.gonexttick()
					} else {
						this.$tip.error(res.data.message)
					}

				})
			},
			gonexttick(){
				let that = this
				that.$nextTick(function(){
					
					console.log('setInterval',11111111111111111)
					that.liveCountTimes = setInterval(function(){
						that.getLiveTimeCount(that.auctionpageData[that.tabIndex].list)
					},1000)
					that.getCurrentSwiperHeight('.scrolllist');
				})
				// this.liveCountTimes = setInterval(function() {
					
				// 	console.log('setInterval',11111111111111111)
				// 	that.getLiveTimeCount(that.loopData[that.tabIndex].list)
				// 	that.getCurrentSwiperHeight('.scrolllist');
				// }, 300)
			},
			getLiveTimeCount(data) {
				let that = this
				//注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
				var data = data
				data.forEach((item) => {
					if(item.startTime == null) return
					var replaceTime = item.startTime
					let transedPreTime = replaceTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
					let nowTime = new Date().getTime(); //获取当前时间毫秒数
					let preTime = new Date(transedPreTime).getTime() //处理好格式之后获取结束时间的毫秒数
					let obj = null;
					if (preTime - nowTime > 0) {
						let time = (preTime - nowTime) / 1000;
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt(time % (60 * 60 * 24) / 3600);
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						obj = {
							day: day < 10 ? '0' + day : day,
							hou: hou < 10 ? '0' + hou : hou,
							min: min < 10 ? '0' + min : min,
							sec: sec < 10 ? '0' + sec : sec
						};
						item.showtime = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
						// console.log(item.showtime,'12345678')
					} else {
						// obj = {
						// 	day: '00',
						// 	hou: '00',
						// 	min: '00',
						// 	sec: '00'
						// };
						item.showtime = ''
					}
				})
				this.auctionpageData[this.tabIndex].list = data
				this.$forceUpdate();
			},
			// 获取内容高度
			getCurrentSwiperHeight(element) {
				if (element == undefined) {
					element = '.scrolllist'
				}
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					this.swiperHeight = res[0][this.tabIndex].height;
					
				})
			},
			//滑动切换导航
			// tabChange(e) {
			// 	this.tabIndex = e.detail.current;
			// 	this.$refs.brands.handleScroll(this.tabIndex)
			// 	this.apiinterestpage()
			// },
			tabtap(index) {
				this.loadingType = false
				this.swiperHeight = 0
				this.auctionpageData[this.tabIndex].list = []
				this.params.pageNo = 1
				this.tabIndex = index;
				this.apiinterestpage()
			},
		},
	}
</script>

<style lang="scss" scoped>

</style>
